<template>
  <div class="layout">
    <div class="box" :style="[boxStyle]">
		<swiper :autoplay="true" :interval="3000" :duration="500" circular :style="{height: imgHeight}">
			<swiper-item v-for="(item,index) in res" :key="index" style="width:702rpx;">
				<image :src="item.img" mode="aspectFill" :style="[imageStyle]" @click="modelNavigateTo(item)">
				</image>
			</swiper-item>
		</swiper>
    </div>
  </div>
</template>

<script>
import { modelNavigateTo } from "./tpl";
export default {
	title: "导航栏",
	components: {
  	
	},
	props: {
		res: {
			
		},
		listStyle: {
			type: Object,
			default: () => {}
		},
		
	},
	  watch: {
		res: {
		  handler(newValue, oldValue) {
			this.$set(this, "res", newValue);
		  },
		  deep: true,
		},
	  },
	computed: {	
		boxStyle() {
			let style={};
			for(var key in this.listStyle){
				style[key] = this.listStyle[key];
			}
			return style;
		},
		imageStyle(){
			let style={};
			if(this.listStyle.borderStatus){
				style.borderRadius=this.listStyle.borderStatus;
			}else{
				style.borderRadius="16rpx";
			}
			if(this.listStyle.height){
				style.height=this.listStyle.height;
			}else{
				style.height="422rpx";
			}
			style.width='100%';
			return style;
		},
		imgHeight() {
			if(this.listStyle.height){
				return this.listStyle.height
			}else{
				return "422rpx";
			}
		},
	},
	data() {
		return {
			modelNavigateTo,
		};
	},
  mounted() {
   
  },
  methods: {
    clickSwiper(item) {
		// console.log(this.res.list[index]);
		// this.res.list[index].link="local://pages/voteActive/votePage?voteId=1&type=vote"
      modelNavigateTo(item);
    },
  },
};
</script>
<style lang="scss" scoped>
.layout{
}
.box{
	width: 702rpx;
}
.banner{
	//border-radius: 30rpx;
}
</style>
